<button type="button" id='position-button' class="oe_button oe_form_button oe_highlight">
    <span>显示地图</span>
</button>
<div id="position-container"></div>

<script>
    !(function() {
        // 选择器，如果腾讯地图API已经被加载，那么自动的显示地图
        var qq_script = document.querySelectorAll("script[src='http://open.map.qq.com/apifiles/2/3/11/main.js']")
        if (qq_script.length > 0) {
            window_position_container_refresh_tx_map();
        } else {
            var position_button = document.getElementById('position-button');
            position_button.addEventListener('click', function(e) {
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://map.qq.com/api/js?v=2.exp&callback=window_position_container_refresh_tx_map";
                document.body.appendChild(script);
            });
        };
    })();

    // 腾讯地图回调函数，需要被暴露在全局对象中
    var window_position_container_refresh_tx_map = function() {
        var CONFIG = {
            items_pair: 10, // 每次实时更新的时候最大取值数量
            item_interval: 30000, // 每次实时更新的时间间隔
        };

        var create_date = null;  // 从后端取地理位置信息的时间起点
        var picking_id = ${picking_id};  // 当前地理位置关联的出货单
        var address = '${address|replace("\n","<br/>")}';

        var polygon_path = [];  // 地理位置信息集合
        var default_interval = [{latitude: 31.239776, longitude: 121.499682}];  // 默认的地理位置，上海东方明珠塔

        var map = null;  // 实际的地图控件
        var marker = null;  // 实际的标记控件
        var polygon = null;  // 实际的折线
        var is_no_path = false;  // 是否不存在地理位置信息
        var geocoder = null;  // 实际的地址解析服务

        function get_default_path() {
            if (address) {
                geocoder = geocoder || new qq.maps.Geocoder({
                    complete: function(result) {
                        set_map([{latitude: result.detail.location.lat, longitude: result.detail.location.lng}]);
                    },
                    error: function() {
                        set_map(default_interval);              }
                });
                geocoder.getLocation(address);
            } else {
                set_map(default_interval);
            }
        };

        function create_map(position, zoom) {
            // var gcj_02_center = GPS_CONVERT.gcj_encrypt(position.latitude, position.longitude);
            // myLatlng = new qq.maps.LatLng(gcj_02_center.lat, gcj_02_center.lon)
            var myLatlng = new qq.maps.LatLng(position.latitude, position.longitude);
            var myOptions = {
                zoom: zoom || 13,
                center: myLatlng,
                scrollwheel: false,
            };

            var position_container = document.getElementById('position-container');
            var position_button = document.getElementById('position-button');

            position_container.style.minHeight = '767px';  // 设置地图的高度
            position_button.parentElement.removeChild(position_button);  // 从dom中移除显示地图按钮

            return new qq.maps.Map(position_container, myOptions);
        };

        function refresh_position() {
            var zoom = map? map.getZoom() : 13;

            $.ajax({
                url: '/position/get_path',
                data: {picking_id: picking_id, items_pair: CONFIG.items_pair || 10, zoom: zoom || 0, create_date: create_date},
                success: function(e) {
                    var res = JSON.parse(e);
                    res.forEach(function(line) {
                        polygon_path.push({latitude: line.latitude, longitude: line.longitude})
                        create_date = line.create_date;  // 取最后一段时间，后台保证时间按照从小到大的顺序
                    });

                    // var map = create_map(path[path.length - 1]);
                    // 只有初始化或者获取到值之后才会重新加载线条和标记
                    if (!map || res.length > 0) {
                        set_map(polygon_path);
                    };

                    if (document.getElementById('position-container')) {
                        setTimeout(refresh_position, CONFIG.item_interval);
                    };
                },
                async: true,
                type: 'get',
            });

        };

        function set_map(path) {
            if (path.length === 0) {
                return get_default_path();
            }

            map = map || new create_map(path[path.length - 1]);

            // var gcj_02_center = GPS_CONVERT.gcj_encrypt(path[path.length - 1].latitude, path[path.length - 1].longitude);
            // var myLatlng = new qq.maps.LatLng(gcj_02_center.lat, gcj_02_center.lon)
            var myLatlng = new qq.maps.LatLng(path[path.length - 1].latitude, path[path.length - 1].longitude);

            // 设置中心点
            map.setCenter(myLatlng);

            var polygon_line = []
            path.forEach(function(line) {
                // var gcj_02_latlng = GPS_CONVERT.gcj_encrypt(line.latitude, line.longitude)
                // polygon_line.push(new qq.maps.LatLng(gcj_02_latlng.lat, gcj_02_latlng.lon))
                polygon_line.push(new qq.maps.LatLng(line.latitude, line.longitude))
            });

            if (polygon_path.length > 0) {
                // 划线
                polygon = polygon || new qq.maps.Polyline({
                    map: map,
                    editable: true,
                    strokeColor: '#000',
                    strokeDashStyle: 'dash',
                    strokeWeight: 3,
                    zIndex: 1000,
                });

                polygon.setPath(polygon_line);

                // 设置标记
                marker = marker || new qq.maps.Marker({ map: map, animation: qq.maps.MarkerAnimation.BOUNCE });
                marker.setPosition(myLatlng);
            };
        };

        // var map = create_map(path[path.length - 1]);
        refresh_position();

        // $.ajax({
        //     url: '/position/set_path',
        //     data: { picking_id: picking_id },
        //     async: true,
        //     type: 'get',
        // });

    };

</script>